import React, {Component} from 'react';
import {Button, Form, Row, Table, Col, Pagination} from 'antd';
import moment from 'moment';
import app from '../AppMethod';
import {takeOutput} from "../value";
import {ChooseOperates} from '../components/EditComponent';
import {config} from "../config";


class OrderTaking extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            allPage: 0,
            data: [],
        }
    };

    columns = [
        {
            title: '下单日期',
            dataIndex: 'output_order_time',
            className: 'tableItem',
            align: 'center'
        },
        {
            title: '订单号',
            dataIndex: 'output_num',
            align: 'center'
        },
        {
            title: '客户名称',
            dataIndex: 'customer_name',
            align: 'center',
            width: '25%'
        },
        {
            title: '负责人',
            dataIndex: 'output_follow_name',
            align: 'center'
        },
        {
            title: '物流类型',
            dataIndex: 'output_logistics',
            align: 'center'
        },
        {
            title: '类型',
            dataIndex: 'output_type',
            align: 'center'
        },
        {
            title: '操作',
            dataIndex: this.columns,
            align: 'center',
            render: data => {
                return (
                    <span>
                        <ChooseOperates type="1" buttonText="打印" duty_type='0'
                                        choose={(roleData,ip) => this.handleChoose(roleData,ip, data.output_id)} left="10px"/>
                        <Button type="primary" style={{marginLeft: '10px', marginTop: '5px'}}
                                onClick={() => this.handleGetDetail(data.output_id)}>详情</Button>
                    </span>
                )
            }
        }
    ];

    render() {
        return (
            <div style={{backgroundColor: '#fff', paddingBottom: '40px'}}>
                <div className="orderTakingTitle">
                    待接单
                </div>
                <Row style={{paddingTop:60}}>
                    <Table
                        columns={this.columns}
                        //rowKey={record => record.order_number}
                        rowKey={(record, index) => index}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        pagination={false}
                        size={'middle'}
                    >
                    </Table>
                </Row>
                <Row style={{marginTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
                    <Col span={12} style={{fontSize: '15px'}}>
                        共 {this.state.pagination.total} 条记录 第 {this.state.pagination.current} / {this.state.allPage} 页
                    </Col>
                    <Col span={12} style={{textAlign: 'right'}}>
                        <Pagination {...this.state.pagination} showSizeChanger={true} showQuickJumper={true}
                                    onChange={(page, pageSize) => this.handlePageChange(page, pageSize)}
                                    onShowSizeChange={(current, size) => this.handleSizeChange(current, size)}
                                    hideOnSinglePage={true}/>
                    </Col>
                </Row>
            </div>
        )
    };

    componentDidMount() {
        this.handleSearchOrderList();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    }

    /**
     * 查询待接单列表
     * @param data
     */
    handleSearchOrderList(data = {page: 1, size: 10, output_status: '0'}) {
        this.setState({loading: true});
        app.post(takeOutput.SEARCH_OUTPUTLIST, data).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                let orderData = result.data.dataSet;
                for (let i = 0; i < orderData.length; i++) {
                    orderData[i].output_order_time = orderData[i].output_order_time === null ? '' : moment(orderData[i].output_order_time).format('YYYY-MM-DD');
                }
                this.setState({allPage, pagination, data: orderData, loading: false});
            } else {
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({allPage, pagination, data: [], loading: false});
            }
        })
    };

    /**
     * 处理分页跳转事件
     * @param page
     * @param size
     */
    handlePageChange(page, size) {
        let data = {};
        data.page = page;
        data.size = size;
        this.handleSearchOrderList(data);
    };

    /**
     * 处理页数变化事件
     * @param current
     * @param size
     */
    handleSizeChange(current, size) {
        let data = {};
        data.page = current;
        data.size = size;
        this.handleSearchOrderList(data);
    };

    /**
     * 跳转到详情页面
     * @param id
     */
    handleGetDetail(id) {
        this.props.history.push(config.path + `/orderDetails/${id}`);
    };

    /**
     * 选择待接单操作人完成接单
     * @param roleData
     * @param id
     */
    async handleChoose(roleData,ip, id) {
        let printResult=await app.handlePrintCar(roleData.employee_id,id,ip);
        if(printResult){
            let data = {
                employee_id: roleData.employee_id,
                output_id: id
            };
            app.post(takeOutput.TAKE_OUTPUT, data).then((result) => {
                if (result.code === 1) {
                    app.alert('接单成功！', 'success', 3);
                    this.handleSearchOrderList();
                } else {
                    app.alert(result.msg, 'error', 3);
                }
            })
        }
    }

};
const OrderTakings = Form.create()(OrderTaking);
export default OrderTakings;